{% extends "layout.html" %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{url_for('.static', filename='css/typeahead.css')}}">
<link rel="stylesheet" href="{{url_for('.static', filename='css/mdict.css')}}">
{% endblock %}

{% block subtitle %}{{word}} - {{config.APP_NAME}}{% endblock %}

{% block maincontent %}
    <div class="modal fade" id="message" tabindex="-1" role="dialog" aria-labelledby="message_body" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div id="message_body" class="modal-body">
                    {{message}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
<div class="row">
    <div class="col-sm-3">
        <div class="sticky-top">
            <div class="anchor-fix"> </div>
            <form method="POST">
                <div class="input-group">
                    {{ form.word(placeholder='word', class='form-control', autocomplete='off') }}
                    <div class="input-group-append">
                        <button id="btn-search" type="submit" class="btn btn-outline-info" style="z-index:1;">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                {{ form.csrf_token }}
            </form>
            <br />
            <h6>从以下词典查找：</h6>
            <div class="mdict-list">
            <ul class="list-group">
                {% for uuid, item in contents.items() %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <div class="form-check">
                        <input type="checkbox" name="mdict_enable" value="{{uuid}}" class="form-check-input" {{'checked' if item.enable}}/>
                        <label class="form-check-label">
                            <a href="#{{uuid}}">{{item.title|safe}}</a>
                            <small data-toggle="modal" data-target="#about_{{uuid}}">
                                <i class="fas fa-info-circle"></i>
                            </small>
                        </label>
                    </div>
                    <!-- Modal -->
                    <div class="modal" id="about_{{uuid}}" role="dialog" data-backdrop="false">
                        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">
                                        <img class="rounded align-text-bottom"
                                             height="24px"
                                             src="{{url_for('.query_resource', uuid=uuid, resource=item.logo)}}"/>
                                        {{item.title|safe}}</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    {{item.about|safe}}
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                {% endfor %}
            </ul>
            </div>
            <div id="export-history" class="float-right">
                <a href="{{url_for('.export_history')}}">导出</a>
            </div>
            <h6>历史：</h6>
            <div class="history-list">
                <ul class="list-group">
                    {%for row in history%}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <a href="{{url_for('.query_word_all', word=row.word)}}">{{row.word}}</a>
                            <span class="badge badge-primary badge-pill">{{row.count}}</span>
                        </li>
                    {%endfor%}
                </ul>
            </div>
        </div>
    </div>

    <div class="col">
        {% for uuid, item in contents.items() if item.content %}
            <div id="{{uuid}}" class="anchor-fix"> </div>
            <div class="card">
                <div class="card-body py-0" id="class_{{uuid}}">
                    <div class="d-flex flex-row-reverse">
                        <div>
                            {%if item.content%}<small>{{word_meta|safe}}</small>{%endif%}
                            <a style="text-decoration:none;"
                               target="_blank"
                               href="{{url_for('.query_word', uuid=uuid, word=word)}}">
                                <img class="rounded align-text-bottom"
                                     height="16px"
                                     src="{{url_for('.query_resource', uuid=uuid, resource=item.logo)}}"/>
                            </a>
                            <button class="btn btn-link btn-sm p-0"
                                    data-toggle="collapse"
                                    data-target="#collapse_{{uuid}}">
                                {{item.title|safe}}
                            </button>
                        </div>
                    </div>
                    <div id="collapse_{{uuid}}" class="collapse{%if item.content%} show{%endif%}">
                        <div class="mdict">
                            {{item.content|safe}}
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
{% block script %}
{{super()}}
<script src="{{url_for(".static", filename="js/mdict.js")}}"></script>
<script src="{{url_for(".static", filename="js/typeahead.bundle.min.js")}}"></script>
<script type="text/javascript">
    if ("{{message}}") {
        $('#message').modal('show');
    }
/* typeahead */
var dataset_engine = new Bloodhound({
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '{{url_for('.query_part', part='')}}' + '%QUERY',
        wildcard: '%QUERY',
        transform: function(data){
            return data.suggestion;
        }
    }
});
$('#word').typeahead({
    minLength: 2,
    highlight: true
},
{
    name: 'suggestion',
    limit: 10,
    source: dataset_engine,
    display: function(data) {
        return data;
    }
});
/* dictionary checkbox */
let toggle_url="{{url_for('.mdict_toggle', uuid='')}}";
$('input[name="mdict_enable"]').each((index, element) => {
    element.addEventListener('change', (event) => {
        let url = toggle_url + element.value;
        $.getJSON(url, (data) => {
            // console.log(data);
        });
    });
});
</script>
{% endblock %}
